import React, { useState, useEffect } from 'react';
import {
  Table,
  Space,
  DatePicker,
  Button,
  Select,
  Form,
  Input,
  Pagination,
  Upload,
  message,
  Spin,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import request from '../../../../http';
import './menJinDaKa.css';

const { RangePicker } = DatePicker;
const { Option } = Select;

const Check = () => {
  const columns = [
    {
      title: '日期',
      dataIndex: '日期',
      key: '日期',
    },
    {
      title: '学号',
      dataIndex: '学号',
      key: '学号',
    },
    {
      title: '姓名',
      dataIndex: '姓名',
      key: '姓名',
    },
    {
      title: '打卡时间',
      dataIndex: '打卡时间',
      key: '打卡时间',
    },
    {
      title: '打卡设备',
      dataIndex: '打卡设备',
      key: '打卡设备',
    },
  ];

  // 表单
  const [form] = Form.useForm();
  //定义表格数据
  const [data, setdata] = useState([{}]);
  //判断分页搜索
  const [pagination, setpagination] = useState('false');
  const [pagination1, setpagination1] = useState('true');
  //接收的分页数
  const [sum, setsum] = useState(1);
  const [sumPage, setsumPage] = useState(1);
  //获取下拉框的值
  const [studentNumber, setstudentNumber] = useState([]);
  const [studentName, setstudentName] = useState([]);
  const [Date, setDate] = useState(0);
  //加载
  const [loading, setloading] = useState(0);

  //全局搜索
  useEffect(() => {
    //查询所有
    request
      .post('/att/a_t/queryPunchRecord', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        // console.log("管理员-门禁打卡请求成功", res.data)
        setloading(1);
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            日期: dataObj.date,
            学号: dataObj.account,
            姓名: dataObj.studentName,
            打卡时间: dataObj.clockDateTime,
            打卡设备: dataObj.punchDevice,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
      })
      .catch((err) => {
        console.log('教师端-综合打分记录请求失败了', err);
      });
  }, []);

  //查询搜索
  const onBtn = () => {
    console.log(studentNumber, studentName, Date);
    request
      .post('/att/a_t/queryPunchRecord', {
        number: 10,
        page: 1,
        date: Date || '',
        studentId: studentNumber || '',
        studentName: studentName || '',
      })
      .then((res) => {
        console.log('管理员-门禁打卡请求成功', res);
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            日期: dataObj.date,
            学号: dataObj.account,
            姓名: dataObj.studentName,
            打卡时间: dataObj.clockDateTime,
            打卡设备: dataObj.punchDevice,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('true');
        setpagination1('true');
      })
      .catch(() => {
        alert('该查询没有数据!');
        setdata('');
        setsum('');
      });
  };

  //分页搜索
  const pageChange = (page, pageSize) => {
    if (pagination == 'false') {
      request
        .post('/att/a_t/queryPunchRecord', {
          number: pageSize,
          page: page,
        })
        .then((res) => {
          // console.log("管理员-门禁打卡请求成功", res.data)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              日期: dataObj.date,
              学号: dataObj.account,
              姓名: dataObj.studentName,
              打卡时间: dataObj.clockDateTime,
              打卡设备: dataObj.punchDevice,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        })
        .catch((err) => {
          console.log('教师端-综合打分记录请求失败了', err);
        });
    }
  };

  //重置
  const onReset = () => {
    history.go(0);
    form.resetFields();
    //查询所有
    request
      .post('/att/a_t/queryPunchRecord', {
        number: 10,
        page: 1,
      })
      .then((res) => {
        // console.log("管理员-门禁打卡请求成功", res.data)
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            日期: dataObj.date,
            学号: dataObj.account,
            姓名: dataObj.studentName,
            打卡时间: dataObj.clockDateTime,
            打卡设备: dataObj.punchDevice,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
      })
      .catch((err) => {
        console.log('教师端-综合打分记录请求失败了', err);
      });
  };

  //获取选择日期
  const DateChange = (date, dateString) => {
    setDate(dateString);
  };

  //导入
  const DaoRuprops = {
    name: 'file',
    action: 'http://10.8.21.168:8082/import/admin/importPunchRecord',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        //导入成功
        if (info.file.response == '导入成功') {
          alert('文件导入成功！');
        } else {
          alert(`文件导入失败！${info.file.response.message}`);
        }
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  //导入模板
  const DaoRuMoBanprops = {
    name: 'file',
    action: 'http://10.8.21.168:8082/common/a_t_s/download',
    data: {
      annexId: 0,
      fileName: '打卡记录表模板',
      isGraduated: 0,
      path: '',
    },
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        //导入成功
        console.log(info.file.response);
        // if(info.file.response == "导入成功"){
        //   alert("文件模板导入成功！")
        // }else{
        //   alert("文件模板导入失败！")
        // }
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  //导出
  const DaoChuprops = () => {
    request
      .post('/export/exportPunchRecord')
      .then((res) => {
        console.log('导出成功', res);
      })
      .catch((err) => {
        console.log(`导出失败,${response.message}`, err);
      });
  };

  return (
    <div>
      <div className="tabBar">
        <Link to="../index">
          <Button style={{ padding: '5px 50px' }}>项目考勤管理</Button>
        </Link>
        <Button type="primary" style={{ padding: '5px 50px' }}>
          门禁打卡记录
        </Button>
      </div>
      <div>
        <Form form={form}>
          <div className="atForm">
            <span>
              日期:{' '}
              <Space direction="vertical" size={12}>
                <DatePicker onChange={DateChange} placeholder="请输入日期" />
              </Space>
            </span>
            <span style={{ marginLeft: 32 }}>
              学号:{' '}
              <Input
                placeholder="请输入学号"
                style={{ width: 200 }}
                onChange={(e) => setstudentNumber(e.target.value)}
              />
            </span>
            <span style={{ marginLeft: 32 }}>
              {/* <Form.Item className="form-item" name="theme" label="学生姓名">
                <Input placeholder="请输入学生姓名" style={{ width: 200 }}/>
            </Form.Item> */}
              学生姓名:
              <Input
                placeholder="请输入学生姓名"
                style={{ width: 200 }}
                onChange={(e) => setstudentName(e.target.value)}
              />
            </span>
            <Button
              type="primary"
              style={{ marginLeft: 870, top: -32 }}
              onClick={onBtn}
            >
              查询
            </Button>
            <Button style={{ marginLeft: 10, top: -32 }} onClick={onReset}>
              重置
            </Button>
          </div>
          <div
            className="form"
            style={{ marginTop: -80, position: 'relative' }}
          >
            <div>
              <Upload {...DaoRuprops}>
                <Button icon={<UploadOutlined />}>导入</Button>
              </Upload>
              <Upload {...DaoRuMoBanprops}>
                <Button icon={<UploadOutlined />}>导入模板</Button>
              </Upload>
              <Button onClick={DaoChuprops}>导出</Button>
            </div>

            {loading == 0 ? (
              <div className="example">
                <Spin size="large" />
              </div>
            ) : (
              <div>
                <Table columns={columns} dataSource={data} pagination={false} />
                <div>
                  <Pagination
                    total={sum}
                    onChange={pageChange}
                    hideOnSinglePage={true}
                  />
                </div>
              </div>
            )}
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Check;
